var navHomePage = document.getElementsByClassName('nav-homePage');
navHomePage[0].addEventListener('click', function () {
  toggleSubMenu();
});

// 存储初始位置
const success = document.querySelector('.success');
const aboutUs = document.querySelector('.aboutUs');
const separator1 = document.querySelector('.separator1');
const separator2 = document.querySelector('.separator2');
const successInitialTop = parseInt(getComputedStyle(success).top);
const aboutUsInitialTop = parseInt(getComputedStyle(aboutUs).top);
const separator1InitialTop = parseInt(getComputedStyle(separator1).top);
const separator2InitialTop = parseInt(getComputedStyle(separator2).top);

function toggleSubMenu() {
  const subMenu = document.getElementById('sub-menu');
  const subMenuDisplay = window.getComputedStyle(subMenu).display;

  if (subMenuDisplay === 'none') {
    // 显示子菜单
    subMenu.style.display = 'block';
    const subMenuHeight = subMenu.offsetHeight;
    success.style.top = (successInitialTop + subMenuHeight) + 'px';
    aboutUs.style.top = (aboutUsInitialTop + subMenuHeight) + 'px';
    separator1.style.top = (separator1InitialTop + subMenuHeight) + 'px';
    separator2.style.top = (separator2InitialTop + subMenuHeight) + 'px';
  } else {
    // 隐藏子菜单
    subMenu.style.display = 'none';
    success.style.top = successInitialTop + 'px';
    aboutUs.style.top = aboutUsInitialTop + 'px';
    separator1.style.top = separator1InitialTop + 'px';
    separator2.style.top = separator2InitialTop + 'px';
  }
}
